<template>
  <div class="container">
    <van-card
      v-for="item of carts"
      :key="item.id"
      :price="item.productPrice"
      :desc="item.productInfo"
      :title="item.productName"
      :thumb="item.productCover"
    >
      <template #footer>
        <van-checkbox class="btn" v-model="item.isSelected"></van-checkbox>
        <span
          >小计：{{ (item.productCount * item.productPrice) | handleAllPrice }}
        </span>
      </template>
      <template #num>
        <van-stepper v-model.number="item.productCount" />
      </template>
    </van-card>
    <van-submit-bar :price="sum" button-text="提交订单">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import Vue from "vue";
import { Card } from "vant";
Vue.use(Card);
import { SubmitBar } from "vant";
Vue.use(SubmitBar);
import { Checkbox, CheckboxGroup } from "vant";
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
import { Stepper } from "vant";
Vue.use(Stepper);
export default {
  data() {
    return {
      carts: [],
    };
  },
  mounted() {
    this.$http("http://47.108.197.28:8000/cart").then((res) => {
      this.carts = res.data;
    });
  },
  filters: {
    handleAllPrice(val) {
      return val.toFixed(2);
    },
  },
  computed: {
    sum() {
      var sum = 0;
      this.carts.forEach((item) => {
        if (item.isSelected) {
          sum += item.productPrice * item.productCount;
        }
      });
      sum = sum * 100;
      return sum;
    },
    allChecked: {
      get() {
        return this.carts.every((item) => item.isSelected);
      },
      set(val) {
        this.carts.forEach((item) => (item.isSelected = val));
      },
    },
  },
};
</script>

<style scoped>
.container {
  width: 50%;
  margin: 30px auto;
  border: 1px solid gray;
}
.btn {
  position: absolute;
  top: 35%;
  left: 5%;
}
.van-card{
  padding: 20px ;
}
.van-card__header {
  padding-left: 60px !important;
}
.van-submit-bar{
  position: relative !important;
}
</style>
